<%@ include file="/WEB-INF/views/admin/header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>



<div id="section">
	<div id ="mainContent">
						
			<div id="ctrlWrapNumber">
				<div id="ctrlL">
					
					
					<div class="centerline" id="formAddNum">
					<form:form  action="numberAdd" method="post" id="add"  modelAttribute="Number" >
					ประเภท : 
						<select  name="type" id="addType" onchange="typeOnChange();" onkeyup="addTypeKeyUp(event);" >
						  <option value="top">บน</option>
						  <option value="down">ล่าง</option>
						  <option value="tang">เต็ง</option>
						  <option value="tod">โต้ด</option>
						  <option value="tangdown">สามตัวล่าง</option>
						</select>
						
					เลข:  <input type="text" name="number" id="addNumber" onKeyUp="enterFormAddNumber(event)" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
					ราคา: <input type="text" name="price" id="addPrice" onKeyUp="enterFormAddPrice(event)" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
					  <button type="button" onclick="return validateForm();"  id="addSubmit" value="เพิ่ม">เพิ่ม</button>	
					</form:form>
					</div>
					
				</div>
				
				<div id="ctrlR">
						<form:form  action="numberSearch" method="post" id="search" >
						ค้นหาตัวเลข : <input type="text" name="number"/> |
						ค้นหาประเภท : <select  name="type">
								  <option value="">ทั้งหมด</option>
								  <option value="top">บน</option>
								  <option value="down">ล่าง</option>
								  <option value="tang">เต็ง</option>
						 		  <option value="tod">โต้ด</option>
						 		  <option value="tangdown">สามตัวล่าง</option>
								</select>
						<button type="submit" value="ค้นหา">ค้นหา</button>				
					</form:form>
				
				</div>
			</div>
			
			
			
			<table class="tableList">
				<tr class="tableHeader">
					<td>ประเภท</td>		
					<td>เลข</td>
					<td>ราคา</td>
					<td>ขั้นตอน</td>
				</tr>
				
				<c:if test="${!empty numbers}">
				
			
				<c:set var="total" value="${0}"/>
				<c:forEach items="${numbers}" var="number" varStatus="index">
				<tr <c:if test="${index.count % 2 == 0}"> class="rowtd"</c:if>>
				    <td 
				    	<c:if test="${number.type == 'top'}"> class="textTop"</c:if>
				    	<c:if test="${number.type == 'down'}"> class="textDown"</c:if>
				    	<c:if test="${number.type == 'tang'}"> class="textTang"</c:if>
				    	<c:if test="${number.type == 'tod'}"> class="textTod"</c:if>
				    	<c:if test="${number.type == 'tangdown'}"> class="textTangdown"</c:if>
				    >
					   	 
					   	 <b><c:if test="${number.type == 'top'}">บน</c:if></b>
					   	 <b><c:if test="${number.type == 'down'}">ล่าง</c:if></b>
					   	 <b><c:if test="${number.type == 'tang'}">เต็ง</c:if></b>
					   	 <b><c:if test="${number.type == 'tod'}">โต้ด</c:if></b>
					   	 <b><c:if test="${number.type == 'tangdown'}">สามตัวล่าง</c:if></b>
					   	 
				   	</td>
				    
				    
				    
				    <td><b>${number.number}</b></td>
				    <td>
				    	${number.price}
				    	<c:set var="total" value="${total + number.price}"/>	
				    </td>

				    <td>
				    	<a href="numberEditForm?id=${number.numberId}"><img  src="${context}/resources/img/edit.jpg"/></a> |
				    	<a href="numberDelete?id=${number.numberId}" onclick="return confirm('คุณแน่ใจที่ต้องการจะลบ ตัวเลขนี้ ?');"><img  src="${context}/resources/img/delete.jpg"/></a>
				    </td>
				</tr>    
				
				
				</c:forEach>
				<tr>
				    <td colspan="4">ยอดรวมในตารางหน้านี้ทั้งหมด : ${total} บาท</td>
				</tr>
				</c:if>
				
				
				<c:if test="${empty numbers}">
				<tr>
				    <td colspan="4"><b>ไม่พบข้อมูล</b></td>
				</tr>    
				</c:if>
				
			</table>
	</div>	
</div>
<%@ include file="/WEB-INF/views/admin/footer.jsp" %>

<script>
function addTypeKeyUp(event) {
	
    if(event.keyCode == 34 || event.keyCode == 35 || event.keyCode == 46) {
    	$('#addNumber').focus();
    }
    if(event.keyCode == 97){ document.getElementById("addType").selectedIndex = 0;typeOnChange();}
    if(event.keyCode == 98){ document.getElementById("addType").selectedIndex = 1;typeOnChange();}
    if(event.keyCode == 99){ document.getElementById("addType").selectedIndex = 2;typeOnChange();}
    if(event.keyCode == 100){ document.getElementById("addType").selectedIndex = 3;typeOnChange();}
    if(event.keyCode == 101){ document.getElementById("addType").selectedIndex = 4;typeOnChange();}
    if(event.keyCode == 107){ $('#addNumber').focus();}
    
    
}
function enterFormAddNumber(event) {
    if(event.keyCode == 13) {
    	validateForm();
    }
    if(event.keyCode == 37) {
    	$('#addType').focus();
    }
    
    if(event.keyCode == 39 || event.keyCode == 107) {
    	$('#addPrice').focus();
    }
}
function enterFormAddPrice(event) {
    if(event.keyCode == 13) {
    	validateForm();
    }
    if(event.keyCode == 37) {
    	$('#addNumber').focus();
    }
}

function typeOnChange(){
	
	var jaddType = $('#addType');
	var jaddNumber = $('#addNumber');
	
	if(jaddType.val() == "top" ){
		jaddNumber.css("background-color", "navy");
		jaddNumber.css("color", "white");
		jaddType.css("background-color", "navy");
		jaddType.css("color", "white");
	}
	if(jaddType.val() == "down" ){
		jaddNumber.css("background-color", "aqua");
		jaddNumber.css("color", "black");
		jaddType.css("background-color", "aqua");
		jaddType.css("color", "black");
		
	}if(jaddType.val() == "tang" ){
		jaddNumber.css("background-color", "orange");
		jaddNumber.css("color", "teal");
		jaddType.css("background-color", "orange");
		jaddType.css("color", "teal");
	}
	if(jaddType.val() == "tangdown" ){
		jaddNumber.css("background-color", "fuchsia");
		jaddNumber.css("color", "yellow");
		jaddType.css("background-color", "fuchsia");
		jaddType.css("color", "yellow");
	}
	if(jaddType.val() == "tod" ){
		// tod
		jaddNumber.css("background-color", "purple");
		jaddNumber.css("color", "red");
		jaddType.css("background-color", "purple");
		jaddType.css("color", "red");
	}
	
}


function validateForm(){
	
	var addType = document.getElementById("addType").value;
	var addNumber = document.getElementById("addNumber").value;
	var addPrice = document.getElementById("addPrice").value;
	var statusError = false;
	if(addNumber == "" || addPrice =="" || addNumber>= 1000 ||addNumber <= -1){
		statusError = true;
	}else if((addType == "top" || addType == "down")  && addNumber.length != 2 ){
		statusError = true;
	}else if((addType == "tang" || addType == "tod"|| addType == "tangdown")  && addNumber.length != 3){
		statusError = true;
	}
	else{
		statusError = false;
	}
	
	// checking for 00
	 if((addType == "top" || addType == "down") && addNumber == "00"){
			statusError = false;
	 }else if((addType == "tang" || addType == "tod" || addType == "tangdown") &&  addNumber == "000" ){
		 statusError = false;
	 }
	
	if(statusError){
	alert("กรุณากรอกข้อมูลให้ถูกต้อง !!!");
	document.getElementById("addNumber").focus();
	return false;
	}else{
		document.getElementById("add").submit();
	}
}


document.getElementById('addType').focus(); 

</script>



